// 登录

<template>
	<view>
		<!-- logo -->
		<view class="login-img">
			<image src="../../static/images/logo.png" mode="widthFix" />
		</view>
		<!-- 表单 -->
		<view class="login-form">
			<view class="login-input">
				<text class="iconfont icon-yonghu"></text>
				<input type="text" placeholder="用户名" v-model="loginForm.account" />
			</view>
			<view class="login-input">
				<text class="iconfont icon-mima"></text>
				<input type="password" placeholder="请输入密码" v-model="loginForm.password" />
			</view>
			<view class="login-check">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="checkAgreement" style="transform: scale(0.6)" />登录即代表阅读并同意
					</label>
				</checkbox-group>
				<navigator url="/pages/mine/agreement?type=user"> 《用户协议》 </navigator>
				和
				<navigator url="/pages/mine/agreement?type=privacy"> 《隐私协议》 </navigator>
			</view>
			<view class="login-btn" @tap="login">登录</view>
		</view>
		<!-- 版权 -->
		<view class="login-copyright">
			<text>版权归酷柚易汛所有</text>
			<text>版本号{{ version || '--' }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		computed,
		onMounted
	} from 'vue'
	import {
		useStore
	} from 'vuex'

	const store = useStore()

	const {
		appContext: {
			config: {
				globalProperties: {
					$api
				}
			}
		}
	} = getCurrentInstance()
	// 开启分享功能
	onMounted(() => {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
		// #endif
	})

	// 获取系统设置
	new(async function() {
		const set = await $api.set.index()

		if (set.code == 200) {
			console.log(set)
			store.commit('setSystemSet', set.data)
			uni.setStorageSync('systemSet', set.data)
		}
	})()

	// 版本
	const version = computed(() => store.getters.getSystemSetByName("sc_version"))

	// 复选框
	let checkAgreement = false
	const checkboxChange = (e) => {
		const {
			value
		} = e.detail
		
		checkAgreement = value.includes('checkAgreement')
	}

	// 登录
	const loginForm = reactive({
		account: 'demo',
		password: '123456'
	})

	const login = async () => {
		console.log('点击是否成功')
		if (!checkAgreement) {
			return uni.showToast({
				title: '请勾选“登录即代表阅读并同意《用户协议》和《隐私协议》”',
				icon: 'none'
			})
		}
		if (!loginForm.account) {
			return uni.showToast({
				title: '请输入用户名',
				icon: 'none'
			})
		}
		if (!loginForm.password) {
			return uni.showToast({
				title: '请输入密码',
				icon: 'none'
			})
		}
		const res = await $api.user.login(loginForm)
		if (res.code == 200) {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				mask: true
			})
			store.commit('setUserInfo', res.data.userinfo)
			uni.setStorageSync('userInfo', res.data.userinfo)
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}, 600)

			// 查询对应设置是否开启
			const set = await $api.set.index()
			if (set.code == 200) {
				console.log(set, '获取set列表')
				set.data.forEach((item) => {
					if (item.name === 'serial') {
						store.commit('setOpenSerial', item.is_checked == 1)
						uni.setStorageSync('openSerial', item.is_checked == 1)
					}
					if (item.name === 'batch') {
						store.commit('setOpenBatch', item.is_checked == 1)
						uni.setStorageSync('openBatch', item.is_checked == 1)
					}
				})
			}
		}

	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #70f7f1 0%, #0054ff 100%);
		color: #fff;
	}
</style>
<style lang="less" scoped>
	// logo
	.login-img {
		display: flex;
		justify-content: center;
		margin: 264rpx 0 162rpx;

		image {
			width: 472rpx;
		}
	}

	// 表单
	.login-form {
		width: 630rpx;
		margin: 0 auto;

		.login-input {
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 0 40rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50rpx;

			&:first-child {
				margin-bottom: 40rpx;
			}

			text {
				margin-right: 20rpx;
			}

			input {
				flex: 1;
			}

			/deep/ .input-placeholder {
				color: #fff;
			}
		}

		.login-check {
			display: flex;
			align-items: center;
			width: 630rpx;
			margin: 42rpx 0;
			font-size: 24rpx;

			label {
				display: flex;
				align-items: center;
			}
		}

		.login-btn {
			height: 100rpx;
			border-radius: 50rpx;
			border: 2rpx solid #ffffff;
			text-align: center;
			line-height: 100rpx;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	// 版权
	.login-copyright {
		position: fixed;
		left: 0;
		bottom: 100rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;

		text:first-child {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			&::before,
			&::after {
				content: '';
				display: inline-block;
				width: 180rpx;
				height: 1px;
				background: #ffffff;
				opacity: 0.8;
			}

			&::before {
				margin-right: 26rpx;
			}

			&::after {
				margin-left: 26rpx;
			}
		}
	}
</style>
